<template>
  <view class="container">
    <view class="heard">
      <image class="loginBg" src="/static/loginBg.png"></image>
      <p>
        <span class="phone">验证码已发送至+86{{ telphone }}</span>
        <span>输入收到的</span>
        <span>6位短信验证码</span>
      </p>
    </view>
    <view class="form">
      <view class="u-flex-xy-center">
        <u-code-input
          v-model="codeValue"
          :maxlength="6"
          borderColor="#C7C7C7"
          :focus="true"
		  style="justify-content: center;"
		  @finish="login()"
        ></u-code-input>
	</view>
	<view style="display: flex;justify-content: center;align-items: center;" v-if="this.isshow==1" >
		<text class="send" v-on:click="sendCode()">重新获取</text>
	</view>
	<view style="display: flex;justify-content: center;align-items: center;" v-if="this.isshow==0" >
		<p class="tips">没有收到验证码?重新获取(</p>
		<u-count-down
				  :time="this.time"
				  format="ss"
				  @finish="unshow()"
				  style="color: #C7C7C7;"
		  ></u-count-down>
	    <p class="tips">)</p>
	</view>
	  
    </view>
  </view>
</template>

<script>
import {sendMsg,login} from  "@/api/api.js"
export default {
	  name: "login",
	  data() {
		return {
		  telphone: "123456789",
		  codeValue: "",
		  isshow:0,
		  time:60000,
		};
	  },
	  onLoad(phone) {
			console.log(phone);
			this.telphone = phone.phone;
	  },
	  methods: {
		  unshow(){
			  this.isshow=1
			  console.log(this.isshow);
		  },
		  sendCode(){
			sendMsg(this.telphone).then(res=>{
				if(res.code==200){
					this.time = 60000;
					this.isshow=0;
				}else{
					uni.showToast({
						title: '短信发送失败',
						icon: 'error'
					})
					return
				}
			});	
		  },
		  login(){
			  login(this.telphone,this.codeValue).then(res=>{
			  	if(res.code==200){
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})
					uni.setStorageSync('uid', res.data.id);
					uni.setStorageSync('phone', res.data.phone);
					uni.setStorageSync('avatar', res.data.avatar);
					uni.setStorageSync('user_name', res.data.user_name);
					uni.setStorageSync('real_name', res.data.real_name);
					uni.setStorageSync('idcard', res.data.idcard);
			  		uni.switchTab({
			  			url:'/pages/my/my',
						success(res) {
							var page = getCurrentPages()[0]
							console.log(page);
							if (page == undefined || page == null) return;
							page.init();
						}
			  		})
			  	}else{
			  		uni.showToast({
			  			title: '登录失败',
			  			icon: 'error'
			  		})
			  		return
			  	}
			  });	
		  }
		  
	  },
};
</script>
<style lang="scss" scoped>
.heard {
  position: relative;
  width: 100vw;
  .loginBg {
    width: 100%;
    height: 390rpx;
    background: #13b9c7;
  }
  p {
    position: absolute;
    bottom: 10rpx;
    z-index: 9;
    font-size: 60rpx;
    font-weight: 400;
    line-height: 80rpx;
    left: 100rpx;
    span {
      display: inline-block;
      width: 100%;
    }
    .phone {
      font-size: 24rpx;
    }
  }
}
.form {
  padding: 48rpx 60rpx;
  box-sizing: border-box;
  .tips {
    text-align: center;
    padding: 66rpx 0;
    font-size: 24rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #606266;
  }
  .send {
    text-align: center;
    padding: 66rpx 0;
    font-size: 24rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #13b9c7;
  }
}
</style>
